var content = view.appendElement("<div x=\"0\" y=\"0\" height=\"100%\" width=\"100%\"></div>");

function view_onOpen() {
    detailsViewData.putValue("confirmed", false);
    new PaletteColors(view);
}

function ColorButton(screen, x, y, layout, onClick) {
    var self = this;
    
    this.layout = layout;
    this.button = screen.appendElement("<div enabled=\"true\" x=\""+x+"\" y=\""+y+"\" width=\"26\" height=\"22\" background=\"resources\\preferences\\buttons\\"+layout+".png\" ></div>");
    this.check = screen.appendElement("<div enabled=\"true\" x=\""+(x+3)+"\" y=\""+(y-2)+"\" width=\"26\" height=\"22\" background=\"resources\\preferences\\buttons\\check.png\" ></div>");
    if (layout == detailsViewData.getValue("layout")) {
        this.check.visible = true;
    }
    else {
        this.check.visible = false;
    }
    if (onClick) {
        this.onClick = onClick;
        this.button.onclick = function() {
            self.onClick();  
        };
    }
}

function PaletteColors(screen) {
    var self = this;
    this.palette = ["black","blood","blue","green","lilac","navy","orange","pink","purple","red","silver","yellow"];
    this.colors = [];


    this.setLayoutBlack = function() {
        detailsViewData.putValue("layout", "black" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 5, 5, "black", self.setLayoutBlack );
    
    this.setLayoutBlood = function() {
        detailsViewData.putValue("layout", "blood" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 5, 30, "blood", self.setLayoutBlood );

    this.setLayoutBlue = function() {
        detailsViewData.putValue("layout", "blue" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 35, 5, "blue", self.setLayoutBlue );
    
    this.setLayoutGreen = function() {
        detailsViewData.putValue("layout", "green" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 35, 30, "green", self.setLayoutGreen );
    
    this.setLayoutLilac = function() {
        detailsViewData.putValue("layout", "lilac" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 65, 5, "lilac", self.setLayoutLilac );
    
    this.setLayoutNavy = function() {
        detailsViewData.putValue("layout", "navy" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 65, 30, "navy", self.setLayoutNavy );

    this.setLayoutOrange = function() {
        detailsViewData.putValue("layout", "orange" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 95, 5, "orange", self.setLayoutOrange );

    this.setLayoutPink = function() {
        detailsViewData.putValue("layout", "pink" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 95, 30, "pink", self.setLayoutPink );

    this.setLayoutPurple = function() {
        detailsViewData.putValue("layout", "purple" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 125, 5, "purple", self.setLayoutPurple );
    
    this.setLayoutRed = function() {
        detailsViewData.putValue("layout", "red" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 125, 30, "red", self.setLayoutRed );
    
    this.setLayoutSilver = function() {
        detailsViewData.putValue("layout", "silver" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 155, 5, "silver", self.setLayoutSilver );
    
    this.setLayoutYellow = function() {
        detailsViewData.putValue("layout", "yellow" );
        
        detailsViewData.putValue("confirmed", true);
        plugin.closeDetailsView();
    };
    new ColorButton( screen, 155, 30, "yellow", self.setLayoutYellow );
}